<template>
  <div>
    <breadcrumb :nav-data="['商品管理', '订单管理']"></breadcrumb>
    <el-card style="margin-top: 30px">
      <el-row
        ><el-col :span="12">
          <div style="margin-top: 15px" :span="2">
            <el-input
              placeholder="请输入内容"
              v-model="lists.query"
              class="input-with-select"
              @change="getOrders"
            >
            </el-input></div></el-col
        ><el-col :span="4" style="margin-left: 30px">
          <el-button type="primary" style="margin-top: 15px" @click="getOrders"
            >搜索</el-button
          ></el-col
        ></el-row
      >

      <table>
        <tr>
          <td>#</td>
          <td>订单编号</td>
          <td>订单价格</td>
          <td>是否付款</td>
          <td>是否发货</td>
          <td>下单时间</td>
          <td>操作</td>
        </tr>
        <tbody>
          <tr v-for="(item, index) in orderslist" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.order_number }}</td>
            <td>{{ item.order_price }}</td>
            <td>
              <span
                :class="[
                  item.order_pay == 0 ? 'Whethertopay-no' : 'Whethertopay-yes',
                ]"
              >
                {{ item.order_pay == 0 ? "未付款" : "已付款" }}
              </span>
            </td>
            <td>
              {{ item.is_send }}
            </td>
            <td>
              {{ new Date(item.create_time * 1000).toLocaleString() }}
            </td>
            <td>
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="EditTheaddress(item)"
              ></el-button>
              <el-button
                type="success"
                icon="el-icon-location-information"
                size="mini"
                @click="Seemore(item.order_id)"
              ></el-button>
            </td>
          </tr>
        </tbody>
      </table>
    </el-card>
    <el-dialog title="提示" :visible.sync="dialogVisiblelogistics" width="30%">
      <div
        class="LogisticsInformation"
        v-for="(item, index) in logistics"
        :key="index"
      >
        <div class="ic"></div>
        <span>{{ item.context }}</span>
        <span>{{ item.ftime }}</span>
        <span>{{ item.location }}</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisiblelogistics = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisiblelogistics = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="ModifyTheaddress" width="30%">
      <span>省市区</span
      ><el-cascader
        :options="cityOptions"
        class="ModifyTheaddress-input"
        :props="{ expandTrigger: 'hover' }"
      >
        <template slot-scope="{ node, data }">
          <span>{{ data.label }}</span>
          <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
        </template>
      </el-cascader>
      <br />
      <span>详细地址</span><input type="text" class="ModifyTheaddress-input" />

      <span slot="footer" class="dialog-footer">
        <el-button @click="ModifyTheaddress = false">取 消</el-button>
        <el-button type="primary" @click="ModifyTheaddress = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="lists.pagenum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="lists.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import cityOptions from "./citydata.js";
export default {
  props: {},
  data() {
    return {
      lists: {
        pagesize: 10,
        pagenum: 1,
        query: "",
      },
      total: 0,
      orderslist: [],
      logistics: [],
      dialogVisiblelogistics: false,
      ModifyTheaddress: false,
      cityOptions: cityOptions,
    };
  },
  computed: {},
  created() {
    this.getOrders();
  },
  mounted() {},
  watch: {},
  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.lists.pagesize = val;
      this.getOrders();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.lists.pagenum = val;
      this.getOrders();
    },
    async getOrders() {
      try {
        const { data } = await this.$http.get("orders", {
          params: this.lists,
        });
        // console.log(data.data, "订单");
        this.orderslist = data.data.goods;
        this.total = data.data.total;
      } catch (error) {
        console.log(error);
      }
    },
    async Seemore(id) {
      this.dialogVisiblelogistics = true;
      try {
        const { data } = await this.$http.get(`kuaidi/${id}`);
        // console.log(data.data, "物流详情");
        this.logistics = data.data;
      } catch (error) {}
    },
    async EditTheaddress(item) {
      this.ModifyTheaddress = true;
      try {
        // console.log(item);
      } catch (error) {}
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
.serach {
  width: 300px;
  height: 40px;
  border: 1px solid #eee;
  border-radius: 5px 0 0 5px;
}
.Serachs {
  width: 70px;
  height: 40px;
  border: 0;
  border-radius: 0 5px 5px 0;
  background: rgb(96, 145, 252);
  color: white;
}
table {
  width: 95%;
  margin: 10px 0;
}
td {
  height: 50px;
  border: 1px solid #eee;
  text-align: center;
}
.Whethertopay-no {
  display: inline-block;
  background: #f56c6c;
  color: white;
  padding: 5px;
  border-radius: 4px;
  font-size: 12px;
}
.Whethertopay-yes {
  display: inline-block;
  background: #409eff;
  color: white;
  padding: 5px;
  border-radius: 4px;
  font-size: 12px;
}
.LogisticsInformation {
  width: 90%;
  border-left: 1px solid #ccc;
  position: relative;
}
.LogisticsInformation .ic {
  width: 15px;
  height: 15px;
  border: 50%;
  border-radius: 50%;
  background: #bbb;
  position: absolute;
  left: -8px;
  top: -8px;
}
.LogisticsInformation span {
  width: 100%;
  display: block;
  margin: 10px;
  color: #909399;
}
.LogisticsInformation span:nth-child(1) {
  color: black;
}
.LogisticsInformation span:nth-child(3) {
  color: black;
}
.ModifyTheaddress-input {
  width: 90%;
  height: 40px;
  border: 1px solid #eee;
  border-radius: 5px;
  margin: 10px;
}
.el-popper {
  height: 500px;
}
</style>
